	* {
	  margin: 0;
	  padding: 0;
	}

	html,
	body {
	  height: 100%;
	  width: 100%;
	}

	div {
	  width: 300px;
	  height: 300px;
	  border-radius: 50%;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  position: relative;
	  cursor: pointer;
	}

	div h1 {
	  font-family: '楷体';
	  width: 300px;
	  height: 300px;
	  border-radius: 50%;
	  background-color: #409EFF;
	  color: white;
	  text-align: center;
	  line-height: 300px;
	  position: absolute;
	}

	div p {
	  width: 260px;
	  height: 260px;
	  border: 20px solid rgba(255, 255, 255, .5);
	  border-radius: 50%;
	  background-image: url(img/1.jpg);
	  background-origin: border-box;
	  position: absolute;
	  opacity: 1;
	  transition-property: transform, opacity;
	  transition-duration: 2s, 2s;
	}

	div:hover p {
	  transform: scale(1.5, 1.5) rotate(360deg);
	  opacity: 0;
	}